import React from "react";
import { SchemaForm } from "@formily/antd";
import {
  Input,
  Radio,
  Checkbox,
  Select,
  DatePicker,
  NumberPicker,
  Rating,
} from "@formily/antd-components";
import { Spin } from "antd";
import {
  CustomTreeSelectFieldSingle,
  // CustomTreeSelectFieldMultiple,
} from "components/formily/components/CustomTreeSelectFieldFormily";
import CustomUploadFieldFormily from "components/formily/components/CustomUploadFieldFormily";
import "antd/dist/antd.css";
import styles from "./RecordForm.less";

class RecordForm extends React.Component {
  handleOk = values => {
    const { onOk } = this.props;
    if (values && onOk) {
      onOk(values);
    }
  };

  handleCancel = () => {
    const { onCancel } = this.props;
    if (onCancel) onCancel();
  };

  transForm = formConfigData => {
    const { properties = {} } = formConfigData;
    const arr = Object.keys(properties);
    if (arr.length > 0) {
      for (const keys of arr) {
        if (
          keys.includes("ColumnLayout") &&
          properties[keys][`x-component-props`]
        ) {
          properties[keys][`x-component-props`].label = "";
        }
      }
    }
    return formConfigData;
  };

  render() {
    const { formConfigData = {}, dataLoading = false, fieldData } = this.props;

    const newFormConfigData = this.transForm(formConfigData);
    return (
      <Spin spinning={dataLoading}>
        {JSON.stringify(newFormConfigData) !== "{}" && JSON.stringify(newFormConfigData) !== "[]" && (
          <SchemaForm
            previewPlaceholder="-"
            editable={false}
            initialValues={fieldData}
            className={styles.schemaForm}
            components={{
              Input,
              TextArea: Input.TextArea,
              Select,
              NumberPicker,
              CheckboxGroup: Checkbox.Group,
              RadioGroup: Radio.Group,
              DatePicker,
              RangePicker: DatePicker.RangePicker,
              Rating,
              SelectPersonField: CustomTreeSelectFieldSingle,
              Attachment: CustomUploadFieldFormily,
            }}
            // labelCol={24}
            // wrapperCol={24}
            schema={newFormConfigData}
          />
        )}
        {JSON.stringify(formConfigData) === "{}" && !dataLoading && (
        <div className={styles.no_data}>
          <span>暂无表单数据</span>
        </div>
          )}
      </Spin>
    );
  }
}

export default RecordForm;
